<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <link type="text/css" rel="stylesheet" href="__STATIC__/layout/js/plugins/raty/demo/css/application.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/plugins/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/layout/css/demo/webuploader-demo.css">
    <style>
        .row {
            padding: 0;
            margin: 0;
        }

        .clearFix::after {
            content: ".";
            clear: both;
            display: block;
            overflow: hidden;
            font-size: 0;
            height: 0;
        }

        .clearFix {
            zoom: 1;
        }

        .textC {
            text-align: center;
        }

        .star_w {
            width: 300px
        }
    </style>

</head>

<body class="gray-bg white-bg">
<div class="container white-bg" style="padding:0;margin:0 auto">
       <div class="page-heade">
       <h2 class="title_color text-center">系统明细</h2>
    </div>
    <div class="row  border-bottom white-bg" style="padding: 0">
        <div class="col-md-12 border_S"
             style="background: #d0e0e0;line-height: 40px;text-align: left;font-size:18px;color:#333;font-size:14px">
            系统基本信息
        </div>
    </div>

        <table class="table table-bordered da_table white-bg" style="margin-bottom:0">
            <tr>
                <td class="textC">系统名称</td>
                <td colspan="4">
                    {$data.title}
                </td>
            </tr>
            <tr>
                <td class="textC">旗下网点数</td>
                <td colspan="4">
                    {$data.net_num}&nbsp;&nbsp;<a href="javascript:;" id="showNets">显示旗下网点</a>
                    <div id="nets" style="display: none;">
                        <ul class="list-group">
                            {volist name="data.nets" id="row"}
                            <li class="list-group-item">{$row.title}</li>
                            {/volist}
                        </ul>

                    </div>
                </td>
            </tr>
            <tr>
                <td class="textC">业务人员</td>
                <td colspan="4">
                    {$data.stuff}
                </td>
            </tr>
            <tr>
                <td class="textC">系统客户类型</td>
                <td colspan="4">
                    {$data.cusType}
                </td>
            </tr>
            <tr>
                <td class="textC">一级渠道类型</td>
                <td colspan="2">
                    {$data.oneCType}
                </td>
                <td class="textC">二级渠道类型</td>
                <td colspan="2">
                    {$data.twoCType}
                </td>
            </tr>
            <tr>
                <td class="textC">详细地址</td>
                <td colspan="4">
                    <span id="detailAddress">{$data.detailAddress} </span>
                    <button class="btn btn-info btn-outline" type="button" id="biaozhumap">在地图上标注</button>
                </td>
            </tr>
        </table>
        <div class="row  border-bottom white-bg" style="padding: 0">
            <div class="col-md-12 border_S"
                 style="background: #d0e0e0;line-height: 40px;text-align: left;font-size:18px;color:#333;font-size:14px">
                系统所属经销商信息
            </div>
        </div>
        <table class="table table-bordered white-bg" style="margin-bottom:0">
            <tr>
                <th>序号
                </td>
                <th>
                    所属经销商
                </th>
                <th>经销商编号</th>
                <th>分区经理</th>
                <th>省办经理</th>
                <th>城市经理</th>
                <th>备注</th>
            </tr>
            {volist name="data.jxs" id="row" key="k"}
            <tr>
                <td>{$k}</td>
                <td>{$row.title}</td>
                <td><a href="javascript:;">{$row.sn}</a></td>
                <td><a href="javascript:;">{$row.zoning_head}</a></td>
                <td><a href="javascript:;">{$row.provice_head}</a></td>
                <td><a href="javascript:;">{$row.city_head}</a></td>
                <td>{if $row.default==1}默认所属经销商{/if}</td>
            </tr>
            {/volist}
        </table>
        <div class="row  border-bottom white-bg" style="padding: 0">
            <div class="col-md-12 border_S"
                 style="background: #d0e0e0;line-height: 40px;text-align: left;font-size:18px;color:#333;font-size:14px">
                系统联络信息
            </div>
        </div>
        <table class="table table-bordered da_table white-bg text-center" style="margin-bottom:0">
            <tr>
                <td>联络人</td>
                <td>电话</td>
                <td>手机</td>
                <td>传真</td>
                <td>电子邮件</td>
                <td>职务</td>
                <td>邮寄地址</td>
                <td>邮编</td>
            </tr>
            {volist name="data.ci" id="row"}
            <tr>
                <td>{$row.name}</td>
                <td>{$row.phone}</td>
                <td>{$row.mobile}</td>
                <td>{$row.fax}</td>
                <td>{$row.email}</td>
                <td>{$row.job}</td>
                <td>{$row.addr}</td>
                <td>{$row.zipcode}</td>
            </tr>
            {/volist}
            <tr>
                <td colspan="2">备注</td>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td colspan="2">系统评价</td>
                <td style="padding: 0;" colspan="6">
                    <table class="table table-bordered">
                        <tr>
                            <td>评价备注</td>
                            <td colspan="5"></td>
                        </tr>
                        <tr>
                            <td>合作意向</td>
                            <td>
                                <div class="col-md-6 star_w" id="cooIntention" data-score="0"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>客户规模</td>
                            <td>
                                <div class="col-md-6 star_w" id="cusSize" data-score="0"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>客户影响力</td>
                            <td>
                                <div class="col-md-6 star_w" id="cusInfluence" data-score="0"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>客户覆盖区域</td>
                            <td>
                                <div class="col-md-6 star_w" id="cusCovArea" data-score="0"></div>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <div class="col-md-6">
                                    <button class="btn btn-info btn-outline" type="button" id="subEvaluation">提交评价</button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <div class="form-group white-bg" style="margin:20px 10px 20px 20px">
            <ul class="list-group" style="margin-left:-20px;margin-right:-10px;">
                {volist name="data.attach" id="row"}
                <li class="list-group-item">
                    <a class="badge badge-primary removeIt" data-id="{$row.id}">移除</a>
                    <a href="{$row.link}" target="_blank">{$row.file_name}</a></li>
                {/volist}
            </ul>
            <div id="uploader" class="wu-example">
                <!--用来存放文件信息-->
                <div id="thelist" class="uploader-list"></div>
                <div class="btns">
                    <div id="picker">选择文件</div>
                    <button id="ctlBtn" class="btn btn-default">开始上传</button>
                </div>
                <form action="" id="add">
                    <input type="hidden" name="attach" id="attach">
                    <input type="hidden" name="remove" id="remove">
                </form>
            </div>
            <span>注：最多上传15个文件，每个文件小于50M,支持格式：</span><br>jpg,bnp,gif,png,jpeg,tif,raw,doc,docx,xls,xlsx,ppt,pptx,txt,pdf,rar,zip,mp4,avi,rmvb,rm,mid,3gp,AVI,3GP,,mpg,mp3,wma,wav
        </div>
        <div class="row sub_btn white-bg form-group" style="width:100%;text-align:center;padding: 20px 0">
            <button type="submit" class="btn btn-success" style="margin-right: 15px" id="tijiao">提交</button>
        </div>
</div>


<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript" src="__STATIC__/layout/js/plugins/raty/lib/jquery.raty.min.js"></script>
<script>
    $(function () {
        $.fn.raty.defaults.path = '__STATIC__/layout/js/plugins/raty/lib/img';
        $("#cooIntention").raty({
            score: '{$data.evaluation.cooIntention}',
            click: function (score, evt) {
                    var id = $(this).attr('id');
                    $('#'+id).data('score',score);
            }
        })
        $("#cusSize").raty({
            score: '{$data.evaluation.cusSize}',
            click: function (score, evt) {
                    var id = $(this).attr('id');
                    $('#'+id).data('score',score);
            }
        })
        $("#cusInfluence").raty({
            score: '{$data.evaluation.cusInfluence}',
            click: function (score, evt) {
                    var id = $(this).attr('id');
                    $('#'+id).data('score',score);
            }
        })
        $("#cusCovArea").raty({
            score: '{$data.evaluation.cusCovArea}',
            click: function (score, evt) {
                    var id = $(this).attr('id');
                    $('#'+id).data('score',score);
            }
        })
        $(".star_w").css("width", "300px")

        $('#subEvaluation').on('click',function () {
            var data = {
                cooIntention:$('#cooIntention').data('score'),
                cusSize:$('#cusSize').data('score'),
                cusInfluence:$('#cusInfluence').data('score'),
                cusCovArea:$('#cusCovArea').data('score'),
                system_id:'{$data.id}'
            }
            $.ajax({
                'type':'post',
                'url':'{:url("subEvaluation")}',
                'data':data,
                'dataType':'json',
                'success':function (data) {
                    if(data.success){
                        swal({title:data.msg,type:'success'},function () {
                            location.reload();
                        })
                    }else{
                        swal(data.msg,'','warning')
                    }
                }
            })
        })
    })

</script>

<script>
    $(function () {
        //移除附件
        $('.removeIt').on('click',function(){
            var id = $(this).data('id')
            id = $.trim(id) //删除前后空格
            var remove = $('#remove').val()
            remove = $.trim(remove)
            var remove = ''!= remove?(remove.split(',')):[];
            if(-1==$.inArray(id,remove,0))
                remove.push(id)
            remove = remove.join(',')
            $('#remove').val(remove)

            $(this).closest('li').remove()
        })
        $('#tijiao').on('click',function () {
            var attach = $('#attach').val();
            var remove = $('#remove').val();
            var action = $('#add').attr('action');
            $.ajax({
                type:'post',
                url:action,
                data:{attach:attach,id:{$data.id},remove:remove},
                dataType:'json',
                success:function (data) {
                    if(data.success){
                        swal({title:data.msg,type:'success'},function () {
                            location.reload();
                        })
                    }else{
                        swal(data.msg,'','warning')
                    }
                }
            })
        })
    })
</script>

<!-- Web Uploader -->
<script type="text/javascript">
    // 添加全局站点信息
    var BASE_URL = '__STATIC__/layout/js/plugins/webuploader';
</script>
<script src="__STATIC__/layout/js/plugins/webuploader/webuploader.min.js"></script>

<script>
    // 文件上传
    jQuery(function() {
        var $ = jQuery,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

        var ids = [];
        uploader = WebUploader.create({

            // 不压缩image
            resize: false,

            // swf文件路径
            swf: BASE_URL + '/js/Uploader.swf',

            // 文件接收服务端。
            server: '{:url("upload/fileupload")}',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker'
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            $list.append( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');

            $percent.css( 'width', percentage * 100 + '%' );
        });

        uploader.on( 'uploadSuccess', function( file,response) {
            console.log(response);
            if(response.success)
                ids.push(response.id)
            $('#' + file.id).find('p.state').text(response.msg);
        });

        uploader.on( 'uploadError', function( file  ) {
            console.log(file)
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader.on( 'uploadComplete', function( file) {
            $('#attach').val(ids.join(','))
            $( '#'+file.id ).find('.progress').fadeOut();
        });

        uploader.on( 'all', function( type ) {
            if ( type === 'startUpload' ) {
                state = 'uploading';
            } else if ( type === 'stopUpload' ) {
                state = 'paused';
            } else if ( type === 'uploadFinished' ) {
                state = 'done';
            }

            if ( state === 'uploading' ) {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }
        });

        $btn.on( 'click', function() {
            if ( state === 'uploading' ) {
                uploader.stop();
            } else {
                uploader.upload();
            }
            return false
        });

        //切换显示隐藏旗下网店
        $('#showNets').click(function(){
            var text = $(this).text()
            if(text == '显示旗下网点'){
                $(this).text('隐藏旗下网点')
                $('#nets').show()
            }else{
                $(this).text('显示旗下网点')
                $('#nets').hide()
            }
        })
        //在地图上重新标注
        $('#biaozhumap').click(function () {
            var index = layer.open({
                type:2,
                title:'在地图上重新标注',
                area:['80%','80%'],
                content:'{:url("map",array("id"=>$data.id))}'
            })
        })
    });
</script>
</body>

</html>